<template>
	<tm-fullView>
		<tm-menubars title="密码输入框" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">验证码</view>
			<tm-password  v-model="num" :code-length="4" :show-val="true" noval="round"></tm-password>
		</tm-sheet>
		
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">个性化</view>
			<tm-password :round="24" :shadow="16" bg-color="white" text-color='primary' :height='110' :width='110' v-model="num" :code-length="4" :show-val="true" noval="mline"></tm-password>
			
		</tm-sheet>
		<tm-sheet :shadow="25">
			<view class="text-size-s text-weight-b mb-24">换个形状</view>
			<tm-password v-model="num" :code-length="5" :show-val="false" noval="mline"></tm-password>
			<view class="py-12"></view>
			<tm-password v-model="num" :code-length="5" :show-val="true" noval="round" model="line"></tm-password>
			<view class="py-32"></view>
			<tm-password v-model="num" :code-length="5" :show-val="false" noval="round" model="box"></tm-password>
			
		</tm-sheet>
		<tm-sheet >
			<view class="text-size-s text-weight-b mb-24 mt-24">暗黑模式</view>
			<tm-password v-model="num" :code-length="5" :black="true" :show-val="true" noval="round" model="box"></tm-password>
		</tm-sheet>
		<view style="height: 50upx;"></view>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmPassword from "@/tm-vuetify/components/tm-password/tm-password.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmPassword},
		data() {
			return {
				num:''
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
